<template>
	<view>
		<index v-if="PageCur=='index'"></index>
		<search v-if="PageCur=='search'"></search>
		<cases v-if="PageCur=='cases'"></cases>
		<news v-if="PageCur=='news'"></news>
		<insert-info v-if="PageCur=='insertInfo'" :isLogin="isLogin"></insert-info>
		<me v-if="PageCur=='me'" :isLogin="isLogin" :baseUrl="baseUrl" :userInfo="userInfo" @logout="toLogout"></me>

		<view class="box">
			<view class="cu-bar tabbar bg-white shadow foot">
				<view class="action" @click="NavChange" data-cur="index">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur=='index'" src="../../static/tabBar/index_cur.png"></image>
						<image v-if="PageCur != 'index'" src="../../static/tabBar/index.png"></image>
					</view>
					<view :class="PageCur=='index'?'color_main':'text-gray'">首页</view>
				</view>

				<view class="action" @click="NavChange" data-cur="search">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur=='search'" src="../../static/tabBar/shop_cur.png"></image>
						<image v-if="PageCur != 'search'" src="../../static/tabBar/shop.png"></image>
					</view>
					<view :class="PageCur=='search'?'color_main':'text-gray'">信息查询</view>
				</view>

				<view @click="NavChange" class="action text-gray add-action" data-cur="cases">
					<!-- <image class="logo_btn" mode="widthFix" src="../../static/me/icon/dengta.png"></image> -->
					<i v-if="PageCur=='cases'" class="cuIcon-creativefill" style="color: #FBBC12;"></i>
					<i v-if="PageCur != 'cases'" class="cuIcon-attention"></i>
					<view :class="PageCur=='cases'?'color_main':'text-gray'">物种识别</view>
				</view>

				<view class="action" @click="NavChange" data-cur="insertInfo">
					<view class='cuIcon-cu-image'>
						<!-- <view class="cu-tag badge">{{message}}</view> -->
						<image v-if="PageCur=='insertInfo'" src="../../static/tabBar/order_cur.png"></image>
						<image v-if="PageCur != 'insertInfo'" src="../../static/tabBar/collection.png"></image>
					</view>
					<view :class="PageCur=='insertInfo'?'color_main':'text-gray'">信息收集</view>
				</view>

				<view class="action" @click="NavChange" data-cur="me">
					<view class='cuIcon-cu-image'>
						<!-- <view class="cu-tag badge">红点</view> -->
						<image v-if="PageCur=='me'" src="../../static/tabBar/me_cur.png"></image>
						<image v-if="PageCur != 'me'" src="../../static/tabBar/me.png"></image>
					</view>
					<view :class="PageCur=='me'?'color_main':'text-gray'">个人中心</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import index from "./index.vue"; //首页
	import search from "./info.vue"; //信息查询
	import cases from "./main.vue"; //物侵通识
	import news from "./news.vue"; //资讯
	import me from "./me.vue"; //个人中心
	import insertInfo from "./insertInfo.vue"; //个人中心
	import {
		logout
	} from '../../common/api/login.js';
	import {
		baseUrl
	} from '../../common/utils/request.js'
	export default {
		components: {
			index,
			search,
			cases,
			news,
			me,
			insertInfo
		},
		data() {
			return {
				PageCur: 'index',

				message: '2',
				openId: '',
				access_token: '',

				tip: "我是提示",
				duration: 1,

				isLogin: false,
				userInfo: {
					item: {
						avatar: "",
						userName: ""
					}
				},
				baseUrl: ''
			};
		},
		created() {

		},
		// 分享小程序
		onShareAppMessage(res) {
			return {
				title: '物侵通识 —— 外来入侵物种监控平台',
			};
		},
		onLoad() {
			//获取退出时的tabbar记录
			// uni.getStorage({
			// 	key: 'PageCur',
			// 	success: function(res) {
			// 		that.PageCur = res.data;
			// 	},
			// 	fail: function(res) {}
			// });

			// token生效时间
			let preTime = uni.getStorageSync("token").split(";")[1]
			// 当前时间
			let curTime = (new Date()).getTime()
			// console.log("time-gap",(curTime-preTime)/1000/60)

			// 老版本清除缓存
			if (preTime == undefined) {
				uni.clearStorageSync()
			}
			// 设置token有效期为7000
			if ((curTime - preTime) / 1000 / 60 > 7000) {
				uni.clearStorageSync()
				this.isLogin = false;
				return;
			}

			let userInfo = uni.getStorageSync('userInfo')
			if (userInfo != null && userInfo != '') {
				this.isLogin = true
				this.baseUrl = baseUrl;
				this.userInfo = uni.getStorageSync('userInfo');
			} else {
				this.isLogin = false
			}
		},
		methods: {
			toLogout() {
				logout().then(res => {
					console.log(res[1])
					if (res[1].data.code == 200) {
						console.log(res[1].data.msg)
						uni.clearStorageSync('userInfo')
						uni.clearStorageSync('token')
					}
				})

				this.isLogin = false
			},
			NavChange: function(e) {
				console.log(e.currentTarget.dataset.cur)

				this.PageCur = e.currentTarget.dataset.cur;

				if (this.PageCur == 'index') {
					// document.title = '首页'
				} else if (this.PageCur == 'component') {
					// document.title = '积分商城'
				} else if (this.PageCur == 'cases') {
					// document.title = '物侵通识'
				} else if (this.PageCur == 'news') {
					// document.title = '文章资讯'
				} else if (this.PageCur == 'me') {
					// document.title = '个人中心'
				} else if (this.PageCur == 'insertInfo') {
					// document.title = '个人中心'
				}

				// uni.setStorage({
				// 	key: 'PageCur',
				// 	data: this.PageCur,
				// 	success: function() {
				// 		console.log('保存成功！');
				// 	}
				// });
			},
			NavChange_xd: function() {
				uni.navigateTo({
					url: 'publish',
					animationType: 'slide-in-bottom',
					animationDuration: 200
				});
			}
		}
	}
</script>

<style lang="scss">
	.box {
		margin: 20upx 0;
	}

	.box view.cu-bar {
		margin-top: 20upx;
	}

	.logo_btn {
		width: 38*2rpx;
		height: 38*2rpx;
		position: absolute;
		z-index: 2;
		border-radius: 50%;
		top: -40rpx;
		left: 0rpx;
		right: 0;
		margin: auto;
		padding: 0;
	}

	.cu-bar.tabbar .action.add-action {
		padding-top: 56rpx !important;
	}
</style>
